<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date、Math、Global对象</title>
    <style>
        /* start slide show */
        #slide_show {
            /* 第一个div的尺寸 */
            width: 520px;
            height: 280px;
            /* overflow:hidden 表示超出这个div的展示内容将被隐藏 */
            overflow: hidden;
        }

        #photos {
            /* calc(1360px * 3) 代表 一共有三张图片 ， 每张长度为1360px */
            width: calc(520px * 3);
            height: 280px;
            /* animation 属性 实现动画效果，switch 动画函数名称，下面会写这个函数，6s代表整个轮播时长, ease-out 方向  infinite 循环轮播 normal 正常结束不反向轮播*/
            animation: switch 6s ease-out infinite normal;
        }

        #photos > img {
            float: left; /* 向左浮动 ，图片连接无缝隙 */
            width: 520px;
            height: 280px;
        }

        /* 轮播函数 */
        @keyframes switch {
            0%, 25% { /* 第1张图所用时长 */
                margin-left: 0px; /* 第一张距离左侧的长度 */
            }
            30%, 60% { /* 第2张图所用时长 */
                margin-left: -520px; /* 第一张距离左侧的长度 */
            }
            70%, 100% { /* 第3张图所用时长 */
                margin-left: -1040px; /* 第一张距离左侧的长度 */
            }
        }

        /* end slideshow */
    </style>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			$.get("pics.json",function(data){
				//alert(JSON.stringify(data));
				$.each(data,function(i,d){
					var p=$("#photos img:eq("+i+")");
					p.attr("src",d.url);
					p.attr("title",d.title);
					//
				});
			});
		});
	</script>
</head>
<body>
<div id="slide_show">
    <div id="photos">
        <!--
            作者：JavaBuild
            时间：2018-10-21
            描述：轮播图
        -->
        <img id="first_slide_photo" src="#"/>
        <img src="#"/>
        <img src="#"/>

    </div>
</div>

</body>
</html>

